<template>
  <div id="map_box" class="map_box"></div>
</template>
<script>
import zc from "@/assets/image/fireCont/消防栓zc.svg";
export default {
  components: {
    zc
  },
  data () {
    return {
      zc: zc,
      location: ""
    }
  },
  props: [
    'position'
  ],
  created () {

  },
  mounted () {
  },
  watch: {
    position: {
      deep: true,
      handler (value) {
        this.location = value.loca
        this.init()
      },
    }
  },
  methods: {
    init () {
      var that = this
      let location = that.location.split(",")
      let marker, map = new AMap.Map('map_box', {
        rotateEnable: true,
        pitchEnable: true,
        zoom: 17,
        // pitch: 45,
        rotation: -15,
        // viewMode: '3D', //开启3D视图,默认为关闭
        center: location,
        terrain: true
      });
      //缩放
      let toolBar = new AMap.ToolBar({
        position: {
          right: '40px',
          top: '300px'
        }
      });
      toolBar.addTo(map);
      let ic = zc
      //添加点标记
      marker = new AMap.Marker({
        icon: ic,
        position: location,
        offset: new AMap.Pixel(-13, -30)
      });
      marker.setMap(map);
    },
  }
}
</script>
<style>
.map_box {
  width: 100%;
  height: 265px;
}
.amap-icon img {
  position: absolute;
  z-index: -1;
  width: 35px;
}
</style>